<template>
  <div class="container">
    <div class="box1">
      <div>
        <a href="#">
          <van-icon name="shop-o" />
          <p>店铺</p>
        </a>
      </div>
      <div>
        <a href="#">
          <van-icon name="service-o" />
          <p>客服</p>
        </a>
      </div>
      <div>
        <a href="#">
          <van-icon name="cart-o" />
          <p @click="go_shopping">购物车</p>
        </a>
      </div>
    </div>
    <div class="box2">
      <div class="butBox">
        <div class="but1" @click="addCar()">
          <p>{{tip1}}</p>
        </div>
        <div class="but2" @click="onClick">
          <p>立即购买</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import goods from './Goods.vue'
import tokenCheck from '../../assets/utils/tokenCheck'
export default {
  components: {
    goods
  },
  data () {
    return {
      username: localStorage.getItem('userData'),
      tip1: '加入购物车',
      disable: true
    }
  },
  mounted () {
    const than = this
    new Promise((resolve, reject) => {
      const username = localStorage.getItem('userData')
      if (!username) {
        return
      }
      this.request.get('/shopping/car', { username })
        .then((data) => {
          resolve(data.data)
        })
    }).then((res) => {
      const res1 = res.filter((res2) => {
        return res2.id == this.$route.query.id
      })

      if (!res1.length == 0) {
        this.tip1 = '已加入'
        // console.log('zxc')
        this.disable = false
        console.log(this.disable)
      }
    })
  },
  methods: {
    onClick () {
      this.request.get('/api/shopping/specification')
        .then((data) => {
          this.$bus.$emit('goods', data)
        // console.log(data)
        })
    },
    go_shopping () {
      console.log(123)
      this.$router.push('shopping')
    },
    addCar () {
      // 获取商品id
      const id = this.$route.query.id

      /// console.log(this.$store.state.shoppingList,11111111)
      console.log('disable', this.disable)

      if (this.disable) {
        // 登入状态验证
        tokenCheck.tokenCheck().then((res) => {
          if (res.status === 400) {
            this.$router.push('/center/login')
            return
          }
          // 获取购物车数据
          const username = res.data.data.name
          // 判断购物车是否有数据
          const fun = new Promise((resolve, reject) => {
            if (!this.$store.state.shoppingList.length) {
            // console.log('a1')
              const username = localStorage.getItem('userData')
              this.request.get('/shopping/car', { username }).then((data) => {
                this.$store.state.shoppingList = data.data
                resolve()
              })
            } else {
              resolve()
            }
          })

          fun.then((data) => {
            console.log(this.$store.state.shoppingList, 'a')
            // 检查购物车是否有当前商品id
            const arr = this.$store.state.shoppingList
            const res1 = arr.filter((res) => {
              return res.id == id
            })
            console.log(res1, 1111111111111)
            if (res1.length == 0) {
              // 往购物车添加数据
              this.request
                .get('/api/shoppingCar', { id, username })
                .then((res) => {
                  console.log(res)
                  this.tip1 = '已加入'
                  const username = localStorage.getItem('userData')

                  // 重新获取购物车数据
                  this.request
                    .get('/shopping/car', { username })
                    .then((data) => {
                      // this.dataList = data.data;
                      this.$store.state.shoppingList = data.data
                      this.disable = false
                      // console.log(data);
                      // console.log(123)
                      // this.disable = false
                    })
                })
            } else {
              // alert('该商品已存在');
              console.log('该商品已存在')
            }
          })
        })
      }
      // console.log(a)
      // this.request.get('/api/shoppingCar',{id})
      // .then((res) => {
      //     console.log(res)
      // })
    }
  }
}
</script>

<style scoped>
.container {
  width: 100%;
  height: 3.75rem;
  background-color: white;
  position: fixed;
  bottom: 0;
  border-top: 0.5px solid rgb(192, 192, 192);
  z-index: 99;
}
.box1 {
  width: 45%;
  height: 100%;
  float: left;
}
.box1 i {
  font-size: 2rem;
  color: black;
}
.box1 > div {
  width: 33.3%;
  height: 3.5rem;
  float: left;
  position: relative;
}
.box1 p {
  text-align: center;
  color: black;
}
.box1 a {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
}
.box2 {
  width: 55%;
  height: 100%;
  float: left;
  position: relative;
}
.box2 .butBox {
  width: 95%;
  height: 3rem;
  border-radius: 3rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.butBox > div {
  width: 50%;
  float: left;
}
.butBox p {
  line-height: 3rem;
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  color: white;
}
.but1 {
  background-color: #ffab1a;
  border-top-left-radius: 1.5rem;
  border-bottom-left-radius: 1.5rem;
}
.but2 {
  background-color: #f83b2d;
  border-top-right-radius: 1.5rem;
  border-bottom-right-radius: 1.5rem;
}
</style>
